<style lang="scss" scoped>
.comments {
  margin-top: 10px;
}

.comments:nth-child(2) {
  margin-top: 0;
}

.van-cell {
  padding-left: 5px;
  padding-right: 0;
}

header {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 95px);
}

.container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
}

.my-swipe {
  border-bottom: 1px solid #f2f2f2;

  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: auto;
    overflow: hidden;
    background: #fff;
  }
}

.details {
  text-align: left;
  padding: 15px 15px;

  .header {
    display: flex;
    border-bottom: 0.5px solid #f8f8f8;
    padding-bottom: 10px;

    img {
      width: 100px;
      height: 100px;
      border-radius: 2px;
      overflow: hidden;
      object-fit: cover;
    }

    .info {
      position: relative;
      top: 8px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-end;
      flex: 1;
      color: #bfbfbf;
      font-size: 13px;
      padding: 0 10px;

      .price {
        color: #F2270C;
        font-size: 22px;
        margin-bottom: 10px;
        font-weight: lighter !important;
        font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
      }

      .store {
        margin-bottom: 8px;
      }

      .tips {
        margin-bottom: 9px;
      }
    }
  }
}

.img {
  width: 100%;
  height: 100%;
}

.title {
  background: #fff;
  padding-bottom: 30px;


  .price {
    position: relative;
    top: 5px;
    padding: 10px 12px;
    color: #F2270C;
    text-align: left;
    font-size: 24px;
    font-weight: 500;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    background: #fff;
  }

  .small {
    font-size: 14px;
  }

  .decimal {
    font-size: 18px;
  }

  .desc {
    position: relative;
    top: 10px;
    padding: 0px 12px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: #fff;
  }
}

</style>
<template>
  <div class="container">
    <!--导航条-->
    <van-nav-bar @click-left="back">
      <van-icon size="20" name="arrow-left" slot="left" color="rgb(150, 151, 153)"/>
      <p slot="title" style="font-size: 14px">商品详情</p>
    </van-nav-bar>
    <header>
      <!--轮播图-->
      <van-swipe class="my-swipe detailses" :autoplay="3000" indicator-color="grey">
        <van-swipe-item :style="{height: innerWidth+'px'}" v-for="(item,index) in details.swiperList" :key="index">
          <van-image class="img" :src="item">
            <template v-slot:error>加载失败</template>
          </van-image>
        </van-swipe-item>
      </van-swipe>
      <div class="title" style="flex:1">
        <!--计算价格-->
        <div class="price">
          <span class="small">￥</span>
          <span>{{ discounts(details) }}</span>
          <span class="decimal">.00</span>
        </div>
        <!--商品描述-->
        <div class="desc van-multi-ellipsis--l3">
          {{ details.desc }}
        </div>
      </div>
    </header>
    <!--小节-->
    <section style="background: #F3F0EC;margin-top: 5px">
      <div
          style="text-align: left;background: #fff;font-weight: bold;font-size: 15px;padding: 5px 0;padding-left: 10px">
        商品评价：
      </div>
      <comments class="comments" :comment="item" v-for="(item,index) in commentList" :key="index"></comments>
      <van-empty v-if="!commentList||!commentList.length" style="background: #fff" description="没有评论"></van-empty>
    </section>
    <!--底部导航-->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="concats"/>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="carts"/>
      <van-goods-action-button
          type="warning"
          :text="details.issale==1 ? '加入购物车' : '已下架'"
          :disabled="details.issale==0"
          @click="onClickButton"
      />
      <van-goods-action-button type="danger" :disabled="details.issale==0" text="立即购买" @click="buyNow"/>
    </van-goods-action>
    <van-popup duration="0.3" v-model="sizeSelectVisiable" round closeable position="bottom"
               :style="{ height: '60%'}">
      <div class="details">
        <div class="header">
          <img :src="details.swiperList&&details.swiperList[0]" alt="图片"/>
          <div class="info">
            <div class="price"><span style="font-size:16px">￥</span><span
                style="font-weight: normal">{{ Math.floor(details.originprice * details.discount / 10) }}</span></div>
            <div class="store">库存只有{{ details.stock }}件</div>
            <div class="tips">请选择型号 购买数量</div>
          </div>
        </div>
        <span style="display: block;margin-top: 10px;margin-left: 5px;font-size: 14px">尺寸</span>
        <tab-check :option="size" v-model="checked"></tab-check>
        <van-cell title="购买数量">
          <van-stepper v-model="num"/>
        </van-cell>
        <van-button type="danger" round block style="position: absolute;width: 90%;bottom:10px;left: 5%"
                    @click="doSubmit">{{ btn }}
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
import { requestGetComments, requestShoppingDetail } from '../../api/commodity'
import { requestAddCart } from '../../api/cart'
import TabCheck from '../../components/shop/TabCheck'
import Comments from '../../components/comment/Comment'
import {
  NavBar,
  Button,
  Cell,
  Swipe,
  SwipeItem,
  Image as VanImage,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Popup,
  Stepper
} from 'vant'
import { requestAddFootPrint } from '../../api/footprint'

Vue.use(NavBar)
Vue.use(Button)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(Stepper)

export default {
  name: 'ShopDetail',
  data () {
    return {
      proid: '',
      details: {},
      checked: 0,
      num: 0,
      btn: '添加购物车',
      size: ['s', 'm', 'l', 'xl', 'xxl'],
      sizeSelectVisiable: false,
      innerWidth: window.innerWidth,
      commentList: [],
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.path === '/search') {
      requestAddFootPrint(to.params.proid).then(res => {
        console.log(res)
      })
    }
    next()
  },
  created () {
    // console.log(this.$route.params.proid)
    this.proid = this.$route.params.proid
  },
  mounted () {
    requestShoppingDetail(this.proid).then(res => {
      this.details = res.data
      this.details.swiperList = res.data.swiper
    })
    requestGetComments(this.proid).then(res => {
      this.commentList = res.data
    })
  },
  methods: {
    ...mapMutations({
      'changeTab': 'tabs/doActive'
    }),
    concats () {
      window.open('http://wpa.qq.com/msgrd?v=3&uin=3320938770&site=qq&menu=yes')
    },
    carts () {
      this.$router.replace('/cart')
    },
    doSubmit () {
      console.log('购买数量', this.num)
      console.log('选择型号', this.size[this.checked])
      if (this.btn === '加入购物车') {
        this.addCart()
      } else {
        if (!this.details.proid) {
          this.$toast('请等待加载完成')
          return
        }
        localStorage.setItem('orderSingle', JSON.stringify({
          size: this.size[this.checked],
          count: this.num,
          proid: this.details.proid,
          proname: this.details.proname,
          originprice: this.details.originprice,
          discount: this.details.discount,
          img: this.details.swiperList[0],
          userid: localStorage.getItem('userid') || ''
        }))
        this.$router.push('/addressList?mode=single')
      }
    },
    buyNow () {
      this.btn = '立即下单'
      this.sizeSelectVisiable = true
    },
    onClickButton () {
      console.log('选择型号')
      this.btn = '加入购物车'
      this.sizeSelectVisiable = true
    },
    addCart () {
      requestAddCart({
        proid: this.proid,
        userid: localStorage.getItem('userid'),
        num: this.num,
        size: this.size[this.checked]
      }).then(res => {
        if (res.code == 200) {
          setTimeout(() => {
            this.$toast.success({
              message: '已添加',
              duration: 800
            })
          }, 500)
          this.$router.back()
        } else {
          this.$router.push('/login')
          this.$toast('请登录')
        }
      })
    },
    discounts (value) {
      return Math.floor(value.originprice * value.discount / 10)
    },
    back () {
      this.$router.back()
    }
  },
  components: {
    TabCheck,
    Comments
  }
}
</script>
